<template>
  <div>

    <div class="absolute top-2 left-5 text-xs	font-size: 0.75rem;">本周预警情况
      <span style="margin-left: 18px;">
        <!-- 注意：在真实的HTML中，内联样式通常不是最佳实践。考虑使用外部样式表。-->
        <select style="
              background-color: #153731; /* 背景色为蓝色 */
              border: 1px solid #44655d; /* 边框为黑色，宽度为1像素 */
              color: white; /* 文字颜色为白色，以便在蓝色背景上清晰可见 */
              width: 140px;
          ">
          <option value="正常">正常</option>
          <option value="预警">预警</option>
          <option value="异常" selected>异常</option>
        </select>
      </span>
    </div>
    <div style="margin-top: 10px;"></div>
    <div ref="chart1" style="width: 100%; height: 250px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart1 = ref();

onMounted(() => {

  var myChart = echarts.init(chart1.value);

  var option = {
    grid: {
      left: "2%",
      right: "2%",
      bottom: "27%",
      top: "1%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return (
          params[0].name +
          "<br/>" +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          params[0].seriesName +
          " : " +
          Number(
            (params[0].value.toFixed(4) / 1).toFixed(2)
          ).toLocaleString() +
          " 次<br/>"
        );
      },
    },
    // backgroundColor: "rgb(20,28,52)",
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: "9"
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#ffffff",
            fontSize: "9",
          },
          formatter: function (value) {
            if (value >= 10000) {
              return (value / 10000).toLocaleString() + "万";
            } else {
              return value.toLocaleString();
            }
          },
        },
        data: [239, 181, 165, 144, 135, 122, 114],
      },
    ],
    series: [
      {
        name: "次数",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 2,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgb(21,55,49,0.3)",
              },
              {
                offset: 1,
                color: "rgb(64,242,249,1.0)",
              },
            ]),
          },
        },
        barWidth: 10,
        data: [239, 181, 165, 144, 135, 122, 114],
      },

    ],
  };

  myChart.setOption(option);
})
</script>



<style lang="scss" scoped></style>